var select = 0
// JSON.parse(u_token)
const vipList = JSON.parse(vip_config)
let html = ''
for (let key in vipList) {
    const item = vipList[key]
    let className = Number(key) === 0 ? 'active' : ''
    html += `
            <div class="swiper-slide clear-fix swiper-slide-visible swiper-slide-active">
                <div class="list-item jsLayerVipListItem ${className}" data-type="${item.type}" data-index="${key}">
                    <div class="list-tips" style="display: none;">新用户专享，立省200元</div>
                    <div class="list-title ellipsis" title="${item.title}">${item.title}</div>
                    <div class="list-price">
                        <span class="dis-price">￥<i class="price">${item.money}</i></span>
                        <span class="ori-price">${item.old_money}</span>
                    </div>
                    <div class="list-desc">
                        <div class="desc ellipsis">
                            <p>${item.desc}</p>
                        </div>
                    </div>
                    <div class="list-select">
                        <i class="list-select-icon iconfont icon-goumaivipxuanzhong"></i>
                    </div>
                </div>
            </div>
        `
}
$('.viplist-wrapper').html(html)
handleChange(vipList[0])
$(function () {
    $(document).on('click', '.op-vip', function () {
        if (u_token && u_token.length > 0) {
            layer.open({
                type: 1,
                skin: 'layui-layer-rim',
                title: '',
                fixed: true,
                shadeClose: false,
                scrollbar: false,
                closeBtn: '',
                maxmin: true,
                shade: 0.8,
                area: ['855px', '642px'],
                content: $('#vipListLayer').html(),
                success: function (e) {
                }
            })
        } else {
            layer.open({
                type: 1,
                skin: 'layui-layer-rim',
                title: '',
                fixed: true,
                shadeClose: false,
                scrollbar: false,
                closeBtn: '',
                maxmin: true,
                shade: 0.8,
                area: ['644px', '570px'],
                content: $('.JsLoginLayer').html(),
                success: function (e) {
                }
            })
        }
    })

    $(document).on('click', '.jsLayerVipListItem', function (e) {
        const index = e.currentTarget.dataset.index
        if (!$(this).hasClass('active')) {
            for (let key in vipList) {
                if (Number(key) !== Number(index)) {
                    $('.layui-layer .jsLayerVipListItem').eq(Number(key)).removeClass('active')
                } else {
                    $('.layui-layer .jsLayerVipListItem').eq(Number(key)).addClass('active')
                    handleChange(vipList[key])
                }
            }
        }
        select = Number(index)
        handleTranslate()
    })

    $(document).on('click', '.jsLayerVipPayBtn', function () {
        layer.msg('唤起支付中...', {
            shade: [0.3, '#000'], time: 5000,
            shadeClose: false
        })
        let pay_type = $(this).data('pay_type')
        let _type = $('.layui-layer #jsLayerVipList').find('.active').data('type')
        fetch('/ajax/payFor/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                'type': _type, 'pay_type': pay_type
            })
        }).then(e => e.json()).then((res) => {
            let code = res.code || 400
            if (code != '200') {
                layerFailed(res.msg)
                return
            }
            setTimeout(function () {
                location.href = res.data.url
            }, 800)
        })
    })
})

function handleChange(item) {
    if (typeof item == 'undefined') return
    $('.jsLayerVipPrice').text(item.money)
    $('.jsLayerVipDisPrice').text(item.old_money - item.money)
    $('.times').text(item.times)
}

function handleActive(type) {
    if (type === 'prev') {
        if (select !== 0) {
            select -= 1
        }
    } else {
        if (select !== vipList.length - 1) {
            select += 1
        }
    }
    for (let key in vipList) {
        if (Number(key) !== select) {
            $('.layui-layer .jsLayerVipListItem').eq(Number(key)).removeClass('active')
        } else {
            $('.layui-layer .jsLayerVipListItem').eq(Number(key)).addClass('active')
            handleChange(vipList[key])
            handleTranslate()
        }
    }
}

function handleTranslate() {
    if (select < 2) {
        $('.viplist-wrapper').css('transform', `translate3d(0px, 0px, 0px)`)
    } else {
        if (vipList.length > 3) {
            $('.viplist-wrapper').css('transform', `translate3d(${-259 * (select - 1)}px, 0px, 0px)`)
        }
    }
}

function showcouponList() {
    $('.coupon-list').show()
}

function handleCoupon() {
    $('.coupon-list').hide()
}

function closeLayer() {
    layer.closeAll()
}

$(document).on('click', () => {
    $('.mui-more-wrap').hide()
})

function handleShow(e, index) {
    if (e && e.stopPropagation) {
        e.stopPropagation();
    } else {
        window.event.cancelBubble = true;
    }
    $('.mui-more-wrap').hide()
    $('.mui-more-wrap').eq(index).show()
}